<template>
	<view class="customer-coupon-item" @click="clickItem" :style="{ backgroundImage: 'url( ' + couponImg + ' )' }">
		<view class="no_avaiable" v-show="couponDetail.isUsed == 1">已使用</view>
		<!-- 	<img :src="couponImg" /> -->
		<view class="customer-coupon-item-context">
			<view class="context-left">
				<view class="coupon-left-container">
					<view style="margin-top: 30rpx; margin-bottom: 20rpx;">
						<text class="coupon-amout-unit">￥</text>
						<text class="coupon-amout">{{ couponDetail.amount }}</text>
					</view>
					<view class="coupon-min">满{{ couponDetail.min }}元可用</view>
				</view>
			</view>
			<view class="context-middle">
				<view class="context-middle-context">
					<view style="margin-bottom: 20rpx;">
						<text class="coupon-type-name">{{ couponDetail.type==0?'定时券':'有效券' }}</text>
					</view>
					<view class="coupon-name">{{ couponDetail.name }}</view>
					<view class="coupon-time-container">
						{{ couponDetail.startTime | formatTime }}
						<span>至</span>
						{{ couponDetail.endTime | formatTime }}
					</view>
				</view>
			</view>
		<!-- 	<view class="context-right">
				<view class="context-right-container"><view class="text">去使用</view></view>
			</view> -->
		</view>
	</view>
</template>

<script>
import couponImg from '@/static/images/coupon-img.png';
import faSongIcon from '@/static/images/fasong-icon.png';
import { errorToShow } from '@/config/common.js';
export default {
	components: {},
	props: {
		couponDetail: {
			type: Object,
			default: function() {
				return {};
			}
		},
		itemHeight: {
			type: Number,
			default: 49
		}
	},
	filters:{
		formatTime:function(value){
			return value.replaceAll("-",".");
		}
	},
	data() {
		return {
			couponImg: couponImg,
			faSongIcon: faSongIcon
		};
	},
	methods: {
		clickItem() {
			this.$emit('clickItem');
		}
	}
};
</script>

<style lang="scss" scoped>
.no_avaiable {
	z-index: 999;
	transform: rotate(30deg);
	font-size: 16px;
	color: #D5D5D5;
	border: solid 1px #D5D5D5;
	width: 61px;
	position: absolute;
	top: 38px;
	right: 13px;
	height: 27px;
	line-height: 27px;
	text-align: center;
}

.customer-coupon-item {
	position: relative;
	margin-bottom: 12rpx;
	width: 100%;
	height: 100%;
	margin-right: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.customer-coupon-item-context {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.context-left {
	width: 32vw;
	height: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	.coupon-min {
		font-size: $main-text-size-24;
		padding-top: 20rpx;
		border-top: 2rpx dashed;
	}
	.coupon-amout {
		font-size: 60rpx;
	}

	.coupon-amout-unit {
		font-size: $main-text-size-24;
	}

	.coupon-left-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.coupon-left-line {
			width: 78rpx;
			border-top: 2rpx dashed;
			margin-bottom: 20rpx;
		}
	}
}
.context-middle {
	height: 100%;
	width: calc(100vw - 33vw);
	&-context {
		margin-left: 20rpx;
		margin-top: 24rpx;

		.coupon-type-name {
			padding: 4rpx;
			padding-left: 12rpx;
			background-color: #ed5875;
			color: #fff;
			border-radius: 6rpx;
			padding-right: 12rpx;
			font-size: $main-text-size-24;
		}

		.coupon-name {
			font-size: $main-text-size-32;
			margin-bottom: 26rpx;
			font-weight: 600;
			color: $main-text-color-gray-black;
		}
		.coupon-time-container {
			font-size: $main-text-size-24;
			color: $main-text-color-grey;
		}
	}
}

.context-right {
	height: 100%;
	width: 120rpx;

	.context-right-container {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;

		.text {
			font-size: $main-text-size-20;
			color: #fff;
			padding: 8rpx 18rpx;
			background-color: #ed5875;
			border-radius: 8rpx;
		}
	}
}
</style>
